import React, { Component } from 'react';

import { Form, Input, Button } from 'antd';
import { connect } from 'react-redux';

import { withRouter } from 'react-router-dom';
import newService from '../../utils/authToken'
import base from 'js-base64';

@withRouter
class LoginForm extends Component {
    state = {
        name: '',
        pwd: ''
    }
    saveRef = React.createRef();
    formRef = React.createRef();
    submit = () => {
        this.formRef.current.validateFields().then((values) => {
            let username = values.username;
            let password = values.password;
            let params = {
                username,
                password
            }
            if (this.saveRef.current.checked === true) {
                document.cookie = "XJHEUD=" + base.Base64.encode(values.username);
                document.cookie = "SDKFJF=" + base.Base64.encode(values.password)
            }
            newService()({ url: "/api/login", method: "post", params }).then((res) => {
                console.log(res);
                if (res.status === 200) {
                    console.log(res);
                    this.props.history.push('/homepage')
                    localStorage.setItem('userName', res.data.data.username);
                }
                const userLevel = res.data.data.userLevel;
                localStorage.setItem('userLevel', userLevel);
            })
        });
    }
    componentWillMount() {
        if (document.cookie) {
            const usermes = document.cookie.split(';')
            const username = base.Base64.decode(usermes[0].split('XJHEUD=')[1]);
            const userpwd = base.Base64.decode(usermes[1].split('SDKFJF=')[1]);
            this.setState({
                name: username,
                pwd: userpwd,
            }) 
        }
    }
    render() {
        return (
            <Form
                style={styles.formStyle}
                wrapperCol={{ span: '100%' }}
                ref={this.formRef}
                onFinish={this.submit}

            >
                <Form.Item
                    name="username"
                    initialValue={this.state.name === '' ? null : this.state.name}
                >
                    <Input type="text" style={styles.inputStyle} placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    initialValue={this.state.pwd === '' ? null : this.state.pwd}
                >
                    <Input type="password" style={styles.inputStyle} placeholder="请输入密码" />
                </Form.Item>
                <div style={styles.radioStyle}><input ref={this.saveRef} type="checkbox" style={{ marginRight: '3px' }} />记住账号</div>
                <Button type="primary" block style={styles.buttonStyle} htmlType="submit">登录</Button>
            </Form>)
    }
}
const styles = {
    formStyle: {
        margin: 'auto'
    },
    inputStyle: {
        height: '43px',
        fontFamily: 'Arial Normal Arial',
        fontWeight: '400',
        fontStyle: 'normal',
        fontSize: '13px',
        color: '#BCBCBC'
    },
    buttonStyle: {
        backgroundColor: ' rgba(0, 124, 212, 1)',
        height: '46px',

        borderRadius: '5px',

        fontSize: '14px'
    },
    radioStyle: {
        margin: '24px 0',
        fontSize: '14px'
    }
}
const mapStateToProps = (state) => {
    return {

    }
}
const mapDispatchToProps = (dispatch) => ({

})
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);